import React, { useRef, useEffect } from 'react';
import styles from './index.less';
import useDrag from './useDrag';
import DragView from '../DragView';

export const componentList = [
  {
    id: '1',
    title: '图片',
    name: 'ImageList',
    config:[
      {
      "title": "图片",
      "tag": "InputItem",//表单组件名称
      "type": "text",
      "key": "src"}
    ],
    template:{
      src:""
    }
  },
  {
    id: '2',
    title: '列表',
    name: 'Goods',
    config:[
      
    ]
  },
  {
    id: '3',
    title: '空盒',
    name: 'Box',
    config:[
      
    ]
  },
];
function DragList() {
  useDrag('listRef', {
    onDrag: (data) => {
      const iframe = document.getElementById('iframe-wrr');
      iframe.style = 'pointer-events:none';
      iframe.contentWindow.postMessage({ ...data, type: 1 }, '*');
    },
    onDragEnd: (data) => {
      const iframe = document.getElementById('iframe-wrr');
      iframe.contentWindow.postMessage({ ...data, type: 1, isAdd: true }, '*');
    },
    onDragOver: () => {
      const iframe = document.getElementById('iframe-wrr');
      iframe.style = '';
    },
  });
  return (
    <div className={styles.dragList} id={'listRef'}>
      {componentList.map((item, index) => (
        <DragView item={item}>
          <div className={styles.box}>{item.name}</div>
        </DragView>
      ))}
    </div>
  );
}

export default DragList;
